<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .demo1{
           height: 140px;
           width: 140px;
           border: 10px solid black;
           margin: 50px auto 0;
         padding: 20px;
          background-color: gold;
          text-indent: 2rem;
       } 
     .demo2{
         width: 400px;
         height: 35px;
         border-top-style: solid;
         border-top-width: 1px;
         border-top-color: #ff0000;
         border-bottom-style: solid;
         border-bottom-width:3px;
         border-bottom-color:  #666666;
      font-size: 20px;
      font-style: '雅黑' #333333;
      margin: 50px auto 0;
      padding-top: 15px;
      text-indent: 1rem;
     }
     .demo3{
         height: 150px;
         width: 200px;
      margin: 0 auto;
     
     }
     .demo3 div{
      width: 200px;
      height: 30px;
      border: 1px solid green;
      background-color: gold;
     margin-top: -1px;
     }
     .demo4{
         width: 500px;
         border: 1px solid black;
          margin: 0 auto;
     }
     .demo4 div{
         margin: 20px;
     }
     .demo5{
         height: 202px;
         width: 202px;
         border: 1px solid black;
         background: gold;
     }
     .demo6{
         height: 50px;
         width: 120px;
         background: green;
        margin-top: -120px;
        margin-left:40px;
     }
     .demo7{
         height: 122px;
         width: 162px;
         background: gold;
         padding-top: 80px;
         padding-left: 40px;
     }
     .demo7 div{ 
         height:50px ;
         width: 120px;
         background: green;
         overflow: hidden;
         
     }
     ul{
         list-style: none;
         width: 300px;
     }
     ul li{
         height: 60px;
         border-bottom: 1px dotted black;
         line-height: 60px;
         text-indent: 50px;
         background:url('./imgs/bg01.png') no-repeat 0 10px;
     }
     ul .li01{
        background:url('./imgs/bg01.png') no-repeat 0 -72px;
     }
     ul .li02{
        background:url('./imgs/bg01.png') no-repeat 0 -154px;
        }
        ul .li03{
            background:url('./imgs/bg01.png') no-repeat 0 -234px;
        }
        ul .li04{
            background:url('./imgs/bg01.png') no-repeat 0 -318px;
        }
    </style>
</head>
<body>
    <div class="demo1">
     在印尼北苏拉威西省(North Sulawesi)托莫洪市的一个市场中，卖蝙蝠、老鼠、蛇等野生动物的商贩生意仍然红火。</div>
       <hr>
    <br>
       <div class="demo2">我是qqqqq</div>
       <hr>
       <div class="demo3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
       </div>
      <hr>
      <div class="demo4">
          <div>在印尼北苏拉威西省(North Sulawesi)托莫洪市的一个市场中，卖蝙蝠、老鼠、蛇等野生动物的商贩生意仍然红火。</div>
          <div>在印尼北苏拉威西省(North Sulawesi)托莫洪市的一个市场中，卖蝙蝠、老鼠、蛇等野生动物的商贩生意仍然红火。</div>
          <div>在印尼北苏拉威西省(North Sulawesi)托莫洪市的一个市场中，卖蝙蝠、老鼠、蛇等野生动物的商贩生意仍然红火。</div>
          <div>在印尼北苏拉威西省(North Sulawesi)托莫洪市的一个市场中，卖蝙蝠、老鼠、蛇等野生动物的商贩生意仍然红火。</div>
      </div>
      <hr>
      <div class="demo5">
      </div>
      <div class="demo6"></div>
    <br>
      <br>
      <br>
      <hr>
      <div class="demo7">
        <div></div>
       </div>
      <hr>
<ul>
    <li>绿婆娘</li>
    <li class="li01">绿婆娘</li>
    <li class="li02">绿婆娘</li>
    <li class="li03">绿婆娘</li>
    <li class="li04">绿婆娘</li>
</ul>
</body>
</html>